<template>
  <div class="main">
    <md-field>
      <div class="inputLine">
        <span>提现金额(元):</span>
        <div>
          <input-validate
            class="input"
            v-model="info.money"
            placeholder="请输入提现金额"
            v-validate="'required|Withdraw'"
            name="money"
            type="number"
            data-vv-value-path="innerValue"
            data-vv-validate-on="input"
            data-vv-as="提现金额"
            :error="errors.first('money')"
          >
          </input-validate>
          <p class="canMoney">可提现金额：{{ canMoney }}</p>
        </div>
      </div>
      <div class="inputLine">
        <span>提现银行卡:</span>
        <md-field-item
          class="bankCard"
          :content="info.card"
          @click="showSelector"
          arrow
          solid
        ></md-field-item>
      </div>

      <div class="inputLine">
        <span>手续费(元):</span>
        <input-validate
          class="input"
          v-model="info.fee"
          placeholder=""
          v-validate="'required'"
          name="fee"
          type="number"
          :disabled="true"
          align="center"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as=""
          :error="errors.first('fee')"
        >
        </input-validate>
      </div>
      <div class="inputLine">
        <span>提现密码:</span>
        <input-validate
          class="input"
          v-model="info.password"
          placeholder="请输入提现密码"
          v-validate="'required'"
          name="password"
          type="password"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="提现密码"
          :error="errors.first('password')"
        >
        </input-validate>
      </div>
    </md-field>
    <md-button type="primary" class="confirm" @click="confirm"
      >确认支付</md-button
    >
    <md-selector
      v-model="isSelectorShow"
      :default-value="info.bankId"
      :data="data"
      max-height="320px"
      title="提现银行卡"
      @choose="onSelectorChoose"
    ></md-selector>
  </div>
</template>

<script>
import { InputItem, Field, Button, Selector, FieldItem } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.Withdraw("Withdraw", "提现金额必须大于100元！");
export default {
  name: "withdraw",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [Selector.name]: Selector,
    [FieldItem.name]: FieldItem
  },
  data() {
    return {
      info: {
        money: "",
        card: "",
        bankId: "",
        fee: "1.5",
        password: ""
      },
      data: [],
      canMoney: "",
      isSelectorShow: false
    };
  },
  methods: {
    balance() {
      this.$ajax
        .post(this.$api.getMoney)
        .then(res => {
          this.canMoney = res.data.money;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    cardList() {
      this.$ajax
        .post(this.$api.cardList)
        .then(res => {
          res.data.data.forEach(item => {
            let obj = {};
            obj.text = item.bank_num + "【" + item.name + "】";
            obj.value = item.bank_id;
            this.data.push(obj);
          });
          if (this.data.length > 0) {
            this.info.bankId = this.data[0].value;
            this.info.card = this.data[0].text;
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorChoose({ text, value }) {
      this.info.card = text;
      this.info.bankId = value;
    },

    confirm() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.getCashs, {
              pay_password: this.info.password,
              bank_id: this.info.bankId,
              money: this.info.money
            })
            .then(() => {
              this.$toast.succeed("提现成功！");
              this.$router.go(-1);
            })
            .catch(err => {
              this.$toast.failed(err);
            });
        }
      });
    }
  },
  created() {
    this.balance();
    this.cardList();
  }
};
</script>

<style scoped lang="stylus">
.main{
  height 100%;
  padding 44px 74px 0;
  background-color #ffffff;
  box-sizing border-box;
}
.inputLine{
  display flex;
  justify-content space-between;

}
.inputLine:nth-of-type(2),.inputLine:nth-of-type(3){
  margin-bottom 30px;
}
  .inputLine>span{
    display inline-block;
    font-size 24px;
    margin-top 32px;
  }
    .canMoney{
      font-size 18px;
      color #999999;
      line-height 43px;
    }
.inputLine:nth-of-type(1)>span{
   margin-right 11px;
 }
.inputLine:nth-of-type(1)>div{
  flex-grow: 1
}
.inputLine:nth-of-type(2)>span{
  margin-right 27px;
}
.inputLine:nth-of-type(3)>span{
   margin-right 34px;
 }
.inputLine:nth-of-type(4)>span{
    margin-right 50px;
  }
.input{
  flex-grow: 1
}
  .bankCard{
    flex: 1
  }
.confirm{
  width: 406px;
  height: 88px;
  background-color #327EB9;
  border-radius 16px;
  font-size 30px;
  margin 67px auto 0;
}
.md-button.primary::after{
  border none;
}
</style>
